@import (once) "../include/vars";

.bg-transparent {
    background-color: @transparent !important;
}

.bg-default {
    background-color: var(--default-background)!important;
    color: var(--default-color)!important;
}

.bg-hover:hover {background-color: @hoverBackground !important;}
.bg-hover2:hover {background-color: @hoverBackground2 !important;}
.bg-hover-light:hover {background-color: @hoverBackgroundLight !important;}
.bg-hover-light1:hover {background-color: @hoverBackgroundLight1 !important;}
.bg-hover-light2:hover {background-color: @hoverBackgroundLight2 !important;}
.bg-hover-light3:hover {background-color: @hoverBackgroundLight3 !important;}

.bg-facebook {background-color: #4267b2!important; color: #ffffff !important;}
.bg-twitter {background-color: #1DA1F2!important; color: #ffffff !important;}
.bg-github {background-color: #24292e!important; color: #ffffff !important;}
.bg-bootstrap {background-color: #563d7c!important; color: #ffffff !important;}
.bg-gitlab {background-color: #e65328!important; color: #ffffff !important;}
.bg-amazon {background-color: #232f3e!important; color: #ffffff !important;}

each(@colors, {
    .bg-@{value} {background-color: @@value !important;}
    .bg-@{value}-active {&:active {background-color: @@value !important;}}
    .bg-@{value}-hover {&:hover {background-color: @@value !important;}}
    .bg-@{value}-focus {&:focus {background-color: @@value !important;}}
})

:root {
    --gm-value: 16px;
}

.bg-glassmorphism {
    background-color: rgba(255, 255, 255, 0.1)!important;
    backdrop-filter: blur(var(--gm-value))!important;
}